<template>
  <el-dialog v-model="dialogVisible" title="选择产品" width="80%">
    <el-form :model="queryParams" :inline="true" class="mb-4" ref="queryFormRef">
      <el-form-item label="BOM编号">
        <el-input v-model="queryParams.bomNo" placeholder="请输入BOM编号" clearable />
      </el-form-item>
      <el-form-item label="货号">
        <el-input v-model="queryParams.productCode" placeholder="请输入货号" clearable />
      </el-form-item>
      <el-form-item label="品名">
        <el-input v-model="queryParams.productName" placeholder="请输入品名" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery">搜索</el-button>
        <el-button @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="list" border height="400px" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="bomNo" label="BOM编号" />
      <el-table-column prop="productCode" label="货号" />
      <el-table-column prop="productName" label="品名" />
      <el-table-column prop="orderQuantity" label="订单数" />
      <el-table-column prop="orderDate" label="订单日期" />
      <el-table-column prop="deliveryDate" label="交货日期" />
      <el-table-column prop="boxTypeName" label="箱型" />
      <el-table-column prop="materialName" label="材质" />
      <el-table-column prop="quotationUnit" label="报价单位" />
      <el-table-column prop="unitPrice" label="单价" />
      <el-table-column prop="areaQuotation" label="面积报价" />
      <el-table-column prop="orderSpecification" label="订单规格" />
      <el-table-column prop="remark" label="备注" />
    </el-table>

    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="addQuotationProducts">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { SaleCustomerQuotationApi } from '@/api/erp/salecustomerquotation'
import { v4 as uuidv4 } from 'uuid'
import { useMessage } from '@/hooks/web/useMessage'
import { SaleBomApi, SaleBomVO } from '@/api/erp/salebom'

const props = defineProps<{ quotationId: string }>()
const emit = defineEmits(['success'])
const message = useMessage()

const dialogVisible = ref(false)
const list = ref<any[]>([])
const total = ref(0)
const queryFormRef = ref()

const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  bomNo: '',
  productCode: '',
  productName: '',
  createTime: []
})

const selectedRows = ref<any[]>([])

const open = () => {
  dialogVisible.value = true
  getList()
}

const getList = async () => {
  try {
    const res = await SaleBomApi.getSaleBomPage(queryParams)
    list.value = res.list || []
    total.value = res.total || 0
  } catch (e) {
    message.error('获取产品列表失败')
    console.error(e)
  }
}

const handleQuery = () => {
  getList()
}

const resetQuery = () => {
  queryFormRef.value?.resetFields()
  queryParams.pageNo = 1
  queryParams.pageSize = 10
  getList()
}

const handleSelectionChange = (rows: any[]) => {
  selectedRows.value = rows
}

const addQuotationProducts = async () => {
  if (!selectedRows.value.length) {
    message.error('请至少选择一条记录')
    return
  }
  for (const item of selectedRows.value) {
    const product = {
      id: uuidv4(),
      quotationId: props.quotationId,
      bomNo: item.bomNo,
      isStop: item.isStop,
      internalOrderId: item.internalOrderId,
      internalOrderNo: item.internalOrderNo,
      productionOrderNo: item.productionOrderNo,
      orderDate: item.orderDate,
      deliveryDate: item.deliveryDate,
      orderType: item.orderType,
      quotationUnit: item.quotationUnit,
      customerPurchaseOrderId: item.customerPurchaseOrderId,
      customerPurchaseOrderNo: item.customerPurchaseOrderNo,
      productCode: item.productCode,
      productName: item.productName,
      productName2: item.productName2,
      styleCode: item.styleCode,
      boxTypeId: item.boxTypeId,
      boxTypeName: item.boxTypeName,
      materialId: item.materialId,
      materialCode: item.materialCode,
      materialName: item.materialName,
      productionMaterialId: item.productionMaterialId,
      productionMaterialCode: item.productionMaterialCode,
      productionMaterialName: item.productionMaterialName,
      orderLength: item.orderLength,
      orderWidth: item.orderWidth,
      orderHeight: item.orderHeight,
      unit: item.unit,
      orderSpecification: item.orderSpecification,
      orderQuantity: item.orderQuantity,
      sparePartsQuantity: item.sparePartsQuantity,
      productionQuantity: item.productionQuantity,
      pieceAttachmentMethod: item.pieceAttachmentMethod,
      isCustomerSpecialPrice: item.isCustomerSpecialPrice,
      areaQuotation: item.areaQuotation,
      unitPrice: item.unitPrice,
      volume: item.volume,
      productionPlanQuantity: item.productionPlanQuantity,
      warehouseInQuantity: item.warehouseInQuantity,
      deliveryQuantity: item.deliveryQuantity,
      printColor: item.printColor,
      quotationNo: item.quotationNo,
      productionLength: item.productionLength,
      productionWidth: item.productionWidth,
      productionHeight: item.productionHeight,
      productionSpecification: item.productionSpecification,
      crossCuttingVersionNo: item.crossCuttingVersionNo,
      isApproved: item.isApproved,
      area: item.area,
      isTerminated: item.isTerminated,
      packagingQuantity: item.packagingQuantity,
      remark: item.remark
    }
    await SaleCustomerQuotationApi.createSaleCustomerQuotationProduct(product)
  }
  message.success('添加成功')
  dialogVisible.value = false
  emit('success')
}

defineExpose({ open })
</script>

<style scoped>
.mb-4 {
  margin-bottom: 16px;
}
</style>
